<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">

</head>

<body>
	<!-- 导航栏 -->
	<ul class="layui-nav" th:replace="index::nav">

	</ul>

	<div>
		<div style="text-align: center;background-color: hsl(203, 51%, 51%);color: white;height: 150px;">
			<h1 style="padding: 50px">入住记录</h1>
		</div>

		<div class="layui-container" style="margin-top: 20px;">
			<form class="layui-form" action="/check-in-record/search" lay-filter="searchForm">
				<div class="layui-form-item" style="display: flex; align-items: center;">
					<!-- 第一个输入框 -->
					<div style="display: flex; align-items: center; margin-right: 10px;">
						<label class="layui-form-label" style="width: auto;">客人姓名</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="name" value="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>

					<!-- 第二个输入框 -->
					<div style="display: flex; align-items: center; margin-right: 10px;">
						<label class="layui-form-label" style="width: auto;">身份证</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="idCard" value="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>

					<!-- 搜索按钮 -->
					<button lay-submit class="layui-btn layui-btn-normal" lay-filter="searchBtn">搜索</button>

				</div>
			</form>
		</div>

		<div>
			<table class="layui-table" lay-even lay-skin="line" lay-size="lg" style="margin: 30px;">
				<colgroup>
					<col width="150">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>入住编号</th>
						<th>客人姓名</th>
						<th>身份证</th>
						<th>手机号</th>
						<th>入住时间</th>
						<th>退房时间</th>
						<th>房号</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 使用 Thymeleaf 循环渲染列表 -->
					<tr th:each="r : ${records}">
						<td th:text="${r.id}"></td>
						<td th:text="${r.guest.name}"></td>
						<td th:text="${r.guest.idCard}"></td>
						<td th:text="${r.guest.phone}"></td>
						<td th:text="${r.inTime}"></td>
						<td th:text="${r.outTime}"></td>
						<td th:text="${r.room.location}"></td>
						<td>
							<!-- 只有当 outTime 为 null 时才显示按钮 -->
							<a th:if="${r.outTime == null}" th:onclick="|checkOut(${r.id})|"
								class="layui-btn layui-btn-xs layui-btn-danger">退房结账</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!-- 弹窗内容 -->
	<div id="guestFormPopup" style="display: none;">
		<form class="layui-form"   id="guestForm">
			<div class="layui-form-item">
				<label class="layui-form-label">房间ID</label>
				<div class="layui-input-block">
					<input type="text" name="roomId" id="checkInRoomId"  readonly placeholder=""
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入电话"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">身份证</label>
				<div class="layui-input-block">
					<input type="text" name="idCard" required lay-verify="required" placeholder="请输入身份证"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
				  <button class="layui-btn" lay-submit lay-filter="sureCheck">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
<script>
	function checkOut(id) {
		layer.confirm('确定退房吗？', {
			btn: ['是的', '取消']
		}, function () {
			$.get('/check-in-record/checkOut/' + id, function (data) {
				if (data.code === 200) {
					layer.msg('操作OK');
					setTimeout(() => {
						window.location.reload();
					}, 1400);
				}

			})
		}, function () {

		});

	}


</script>

</html>